<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>大屏幕设计器</title>
    <link rel="stylesheet" href="../common/reset.css" />
    <link rel="stylesheet" href="../common/bootstrap4/bootstrap.min.css" />
    <link rel="stylesheet" href="../common/loading/component.css" />
    <link rel="stylesheet" href="../common/loading/custom-bars.css" />
    <script src="../common/jquery/jquery-1.11.0.js"></script>
    <script src="../common/bootstrap4/bootstrap.min.js"></script>
</head>

<body>
    <div class="card" style="border:none;">
        <div class="card-body">
            <h5 class="card-title">更新内容
                <span class="badge badge-info" id="newVer">New Version</span>
            </h5>
        </div>
        <ul class="list-group list-group-flush" style="padding-bottom:60px;">
            <!-- <li class="list-group-item">详细内容一</li>
            <li class="list-group-item">详细内容二</li>
            <li class="list-group-item">详细内容三</li> -->
        </ul>
        <!-- <div class="card-body">

        </div> -->
        <button id="updateBtn" style="position: fixed;bottom: 0px;" type="button" class="btn btn-primary btn-lg btn-block">立即更新</button>
        <section class="content" id="update-progress" >
            <article class="flexy-grid">
                <div class="flexy-column">
                    <div class="progress-factor flexy-item">
                        <div class="progress-bar">
                            <div class="bar has-rotation has-colors navy ruler" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" id="updateBar">
                                <div class="tooltip white"></div>
                                <div class="bar-face face-position roof percentage"></div>
                                <div class="bar-face face-position back percentage"></div>
                                <div class="bar-face face-position floor percentage volume-lights"></div>
                                <div class="bar-face face-position left"></div>
                                <div class="bar-face face-position right"></div>
                                <div class="bar-face face-position front percentage volume-lights shine"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="progress-text">正在更新......</div>
            </article>
        </section>
        <div class="modal fade" id="updateModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">提示信息</h5>
                </div>
                <div class="modal-body">
                    更新完成，请重新打开设计器
                </div>
                <div class="modal-footer">
                    <button type="button" id="close-win" class="btn btn-primary">重启设计器</button>
                </div>
                </div>
            </div>
            </div>

    </div>
    <script>
        $(function(){
            $("#updateBtn").bind("click",function(){
                parent.updateSys();
            });
            $("#close-win").bind("click",function(){
                window.top.location.reload();
            });
        });
        function showProgress(){
            $("#update-progress").show();
        }
        function setProgress(val){
            $("#updateBar").attr("aria-valuenow",val);
            console.log(val);
            if (val==100) {
                setTimeout(() => {
                    $("#updateModalCenter").modal('show');
                }, 500);
            }
        }
        function createDesc(desc,versionNumber){
            let descArr = JSON.parse(desc);
            $.each(descArr,function(i,node){
                let descLi = $(' <li class="list-group-item">'+node+'</li>');
                $(".list-group").append(descLi);
            });
            $("#newVer").html("服务器版本："+versionNumber);
        }
    </script>
</body>

</html>